<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <div class="text">
            <h1>50</h1>
        </div>
        <div>
            <button class="begin">开始</button>
            <button class="end" disabled = true>停止</button>
            <button class="reset">重置</button>
        </div>
    </div>
    <script>
        let begin = document.querySelector('.begin')
        let end = document.querySelector('.end')
        let reset = document.querySelector('.reset ')
        let countdown =  document.querySelector('h1')
        let t;
        let Switch = true
        begin.onclick = ()=>{
            clearInterval(t)


            t = setInterval(()=>{
                if (countdown.innerHTML > 0){
                    countdown.innerHTML--
                }
                if(end.disabled === true){
                    end.disabled = end.disabled =  false
                }
                if(Switch === true){
                    begin.disabled = true
                    Switch = false
                }

            },100)
        }
        end.onclick = ()=>{
            clearInterval(t)
            if(end.disabled === false){
                end.disabled = end.disabled =  true
            }
            if(Switch === false ){
                begin.disabled = false
                Switch = true
            }
        }

        reset.onclick = ()=>{
            clearInterval(t)
            countdown.innerHTML = countdown.innerHTML = 50
            if(Switch === false ){
                begin.disabled = false
                Switch = true
            }
            if(end.disabled === false){
                end.disabled = end.disabled =  true
            }


        }

    </script>
</body>
</html>